<template>
  <div class="container">
    <div class="banner">
      <img :src="bannerImg" alt="" mode="widthFix" class="banner_img">
    </div>
    <div class="title">
      <van-cell-group>
        <van-cell :title="nodes.name" :value="nodes.labelprice" size="large" :label="nodes.name" />
      </van-cell-group>
    </div>
    <div class="details">图文详情</div>
    <div class="info">
      <wxParse :content="nodes.content" @preview="preview" @navigate="navigate" />
      <!-- <van-submit-bar :price="nodes.price" button-text="分享" @submit="onShare" /> -->
      <div class="footer flex">
        <div class="words flex-item"><span>合计：</span>￥{{nodes.price}}</div>
        <van-button type="danger" open-type="share" class="sharebtn">分享</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
// import Toast from '@/utils/toast'
import wxParse from 'mpvue-wxparse'
export default {
  data () {
    return {
      expandingList: [],
      shareid: 0,
      nodes: '',
      bannerImg: '',
      shopid: 0
    }
  },
  components: {
    wxParse
  },
  onLoad (option) {
    this.shareid = option.shareid
    this.shopid = option.shopid
  },
  async onShow () {
    this.getinfo()
  },
  methods: {
    async getinfo () {
      let userId = wx.getStorageSync('userInfo').user_id;
      let ret = await api.expandingCustomersDetails({ user_id: userId, list_id: this.shareid });
      if (ret.code === '100') {
        this.nodes = ret.data
        this.nodes.price = Number(parseFloat(this.nodes.price).toFixed(2))
        this.nodes.labelprice = `￥${parseFloat(this.nodes.price).toFixed(2)}`
        wx.setNavigationBarTitle({
          title: ret.data.name
        })
        let imgReg = /<img.*?(?:>|\/>)/gi;
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // eslint-disable-line
        let imgArr = ret.data.content.match(imgReg);
        if (imgArr) {
          console.log(111)
          let imgInfo = [];
          for (var i = 0; i < imgArr.length; i++) {
            var src = imgArr[i].match(srcReg);
            imgInfo.push(src[1])
          }
          this.bannerImg = imgInfo[0]
        }
      }
    },
    goDetails (e) {
      console.log(e)
      // url="/pages/guest/expandingCustomersDetails/expandingCustomersDetails?id="
    },
    preview (src, e) {
      // do something
    },
    navigate (href, e) {
      // do something
    }
  },
  onShareAppMessage (res) {
    let orcode = wx.getStorageSync('userInfo').orcode;
    let userid = wx.getStorageSync('userInfo').user_id;
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    } else {
      console.log(res.target)
    }
    return {
      imageUrl: this.bannerImg,
      title: this.nodes.name,
      path: `/pages/shop/shareDetails/shareDetails?shareid=${this.shareid}&workerid=${userid}&orcode=${orcode}&shopid=${this.shopid}`
    }
  }
}
</script>

<style scoped>
.container {
}
.cell-group {
  width: 100%;
}
.info {
  width: 100%;
  padding: 20rpx;
  background: #fff;
}
.banner {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.banner_img {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.title {
  width: 100%;
}
.details {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.2);
  text-align: center;
  color: #ff4444;
  font-size: 32rpx;
  font-weight: 600;
  background: #fff;
}
.footer {
  width: 100%;
  height: 100rpx;
  background: #fff;
  line-height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 10rpx 10rpx 30rpx #333;
}
.footer .words{
  text-align: right;
  padding-right: 20rpx;
  font-size: 28rpx;
}
.footer .words span{
  color: #ff4444;
}
</style>
<style>
@import url("~mpvue-wxparse/src/wxParse.css");
.wxParse .p {
  font-size: 32rpx;
  color: #333;
}
.van-cell__title {
  color: #ff4444;
  font-weight: 600;
  font-size: 32rpx;
  white-space: nowrap;
}
.van-cell__label {
  margin-top: 20rpx;
}
.van-cell__value {
  color: #ff6600;
}
.footer .van-button{
  width: 200rpx;
  height: 100rpx;
}
</style>